<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>珲春口岸监控视频</title>

    <style>
        .biankuangs{ border:solid #A6D2FF 1px; border-top:0px; }
        #item_text2,#item_text1,#itemtypes2,#item_text3{ /**/display:none;}
        .wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
        .jklabel{
            position: absolute;
            width: calc(100% - 2px);
            /*margin-left: 2px;*/
            text-align: center;
            background-color: rgba(0,0,0,0.4);
            color: white;
        }
    </style>
    <link rel="stylesheet" href="../../css/mycover.css">
    <!--<link href="js/lib/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">-->
    <script type="text/javascript" src="../../js/jquery-2.2.3.min.js"></script>
    <!--<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>-->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all" />
    <!--<script type="text/javascript" src="lib/layui/lay/modules/layer.js"></script>-->
    <!--<script type="text/javascript" src="echarts/echarts.js"></script>-->
    <script type="text/javascript" src="../../lib/layui/layui.js"></script>
    <!--<script type="text/javascript" src="js/lib/ztree/jquery.ztree.all.min.js"></script>-->
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <!--<script src="https://js.arcgis.com/3.46/init.js"></script>-->
    <script src="http://202.111.178.10:30080/3.29/init.js"></script>
    <script type="text/javascript">
        //region Z-tree相关行为
        function diaodu(){
            layer.alert("backlook!");
        }
        var setting = {
            view: {
                fontCss: getFont,
                nameIsHTML: true
            },
            callback: {
                onClick: onClick
            }
        };

        var zNodes = [{
            name: "视频监控",
            open: true,
            children: [{
                name: "查干湖西1",
                open: true,
                children:[{
                    id:11,
                    name:"监控点1",
                    font:{'color':'red'}
                },{
                    name:"监控点2"
                }]
            }, {
                name: "查干湖西2",
                children:[{
                    name:"监控点1"
                },{
                    name:"监控点2"
                }]
            }, {
                name: "查干湖东1",
                children:[{
                    name:"监控点1"
                },{
                    name:"监控点2"
                }]
            }]
        }
        ];

        function getFont(treeId, node) {
            return node.font ? node.font : {};
        }

        $(document).ready(function() {
            $.fn.zTree.init($("#tree"), setting, zNodes);
        });

        //树的点击操作
        function onClick(event, treeId, treeNode, clickFlag){
            if(treeNode.id == 11){
                if(clickFlag == 1){
                    $(".came").css("display","none");
                    $("#camo1").css("display","block");
                    $("#camo1").css("width","100%");
                    $("#camo1").css("height","100%");
                }else{ //还原4视图
                    $(".came").css("display","block");
                    $("#camo1").css("width","50%");
                    $("#camo1").css("height","50%");
                }
            }
        }
        //endregion

        //region 视频回看
        function backsee(){
            layer.open({
                type:1,
                title:'视频回放',
                area: ['700px', ''],
                zIndex:19891014, //默认19891014
                //shadeClose: true,
                //close:true,
                //shade: [0.1, '#ffff00'], //或者shade: 0
                //shade: false,
                content: $('#videoReplay')
                /*content: '<div style="width: 100%;height:100%;">\
                            <div class="jklabel">监控点001</div>\
                            <video width="100%" height="100%" controls="controls">\
                              <source src="images/videos/jk.mp4" type="video/mp4" />\
                             </video>\
                          </div>'*/
            });
            //x_admin_show('视频回放',$('#videoReplay'),600,400);
        }
      //endregion
    </script>
    <script>

        var map, idx;

        require(["dojo/dom",
            "dojo/on",
            "esri/map",
            "esri/layers/FeatureLayer",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/symbols/PictureMarkerSymbol",
            "esri/renderers/SimpleRenderer",
            "esri/InfoTemplate",
            "dojo/domReady!"], function (
            dom,
            on,
            Map,
            FeatureLayer,
            ArcGISDynamicMapServiceLayer,
            ArcGISTiledMapServiceLayer,
            PictureMarkerSymbol,
            SimpleRenderer,
            InfoTemplate) {
            // 以下是创建地图与加入底图的代码
            map = new Map("map",{logo:false});

            var baseLay = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/BHQ/JL_15m/MapServer");
            map.addLayer(baseLay);
            map.on("load",function(){
                var point = new esri.geometry.Point( {"x": 130.46, "y": 42.77, "spatialReference": {"wkid": 4326 } });
                map.centerAndZoom(point,7);
            });

            //var camerolayer = new FeatureLayer("http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer/0",{
            var camerolayer = new FeatureLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer/0",{
                mode: FeatureLayer.MODE_SNAPSHOT,
                outFields: ["*"],
            });

            //设置点图层的摄像头符号
            var pictureMarkerSymbol = new PictureMarkerSymbol('images/videos/camero.png', 25, 25);
            var renderer = new SimpleRenderer(pictureMarkerSymbol);
            camerolayer.setRenderer(renderer);

            map.addLayer(camerolayer);

            camerolayer.on("click",function(evt){
                console.log(evt);
                if(idx != null){
                    layer.close(idx);
                }
                idx = layer.open({
                    skin: 'demo-class',
                    title:evt.graphic.attributes.FID+1,
                    type: 2,
                    area: ['700px', '430px'],
                    shadeClose: true,
                    shade: false,
                    content: '6-jiankong-1.html',
                });
            });


        });

    </script>
</head>
<body>
<div id="left" style="position: absolute; left: 0px; top: 0px; height: 100%; width: 400px; border-right: 1px solid #ffffff">
    <!--<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tbody>
        <tr>
            <td width="100%" style="text-align: center; background-color: rgba(0,0,0,0.5); color:white">视频监控</td>
        </tr>
        </tbody>
    </table>
    <ul id="tree" class="ztree"></ul>-->
    <div style="width: 100%; height: 399px; top: 10px; left: 0; text-align: center;">
        <div id="map"></div>
    </div>
    <div style="width: 100%; height: 399px; bottom: 10px; left: 0; text-align: center;">
        <img src="../../images/videos/yt.png"><br><br>
        <input type="button" value="+" class="layui-btn layui-btn-xs"><label>调焦</label><input type="button" value="-" class="layui-btn layui-btn-xs"><br><br>
        <input type="button" value="视频回放" class="layui-btn" onclick="backsee()">
    </div>
</div>

<div style="position: absolute; top: 10px; right: 10px; left: 401px; bottom: 10px;">
    <div class="came" id="camo1" style="position: absolute; left: 0; top: 0; width: 50%;height: 50%;">
        <div style="height: 100%;width: calc(100% - 2px)"><div class="jklabel">监控点1</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="../../images/videos/kouan.avi" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" style="position: absolute; left: 50%; top: 0; width: 50%;height: 50%;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点2</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="../../images/videos/kouan.avi" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" style="position: absolute; left: 0; top: 50%; width: 50%;height: 50%;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点3</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="../../images/videos/kouan.avi" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" style="position: absolute; left: 50%; top: 50%; width: 50%;height: 50%;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点4</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="../../images/videos/kouan.avi" type="video/mp4" />
            </video>
        </div>
    </div>
</div>

<!--弹出层：视频回放的弹窗-->
<div id="videoReplay" style="display:none;"> <!--style="position:relative;display:none;width: 100%;height:100%;left:calc(50% - 10px);"-->
    <div class="jklabel">监控点</div>
    <video width="100%" height="100%" controls="controls" autoplay="autoplay">
        <source src="../../images/videos/kouan.avi" type="video/mp4" />
    </video>
</div>

</body>
</html>